{% extends "cms/cms_base.html" %}
{% from "common/_macros.html" import static %}

{% block title %}
    反馈管理
{% endblock %}

{% block head %}
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
    <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
    <link rel="stylesheet" href="{{ static('cms/css/feedback_record.css') }}">
    <script src="{{ static('common/amanqiniu.js') }}"></script>
    <script src="{{ static('cms/js/feedbackrecord.js') }}"></script>
    <script src="{{ static('cms/js/searchFeedbackrecord.js') }}"></script>
    <script src="{{ static('cms/js/exportData.js') }}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-spacing: 0;
            border-collapse: collapse;
            text-align: left;
        }
        /*关键设置 tbody出现滚动条*/
        table tbody {
            display: block;
            height: 545px;
            overflow-y: scroll;
        }
        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
        table thead {
            width: calc( 100% - 1em)
        }
        table thead th {
            background: #ccc;
        }
    </style>

{% endblock %}

{% block main_content %}
    {{ pagination.links }}
    <div class="top-box">
        <button type="button" class="btn btn-warning" id="search-feedback-btn" onclick="searchRecords()">查询</button>
        <button type="button" class="btn btn-warning" id="export-feedback-btn" onclick="exportData()">导出</button>
        <button class="btn btn-warning" data-toggle="modal" data-target="#feedback-dialog">添加</button>
        <span style="font-size: 20px">反馈管理（共 {{ total }} 条记录）</span>
        反馈日期：<input type="date" id="search-feedback_date" name="searchFeedbackDate" style="width: 130px;" placeholder="反馈日期">
        描述：<input type="text" id="search-issuedesc" name="searchIssueDesc" style="width: 200px;" placeholder="问题描述">
        反馈人：<input type="text" id="search-provider" name="searchProvider" style="width: 100px;" placeholder="反馈人">
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>日期</th>
                <th>反馈人</th>
                <th class="issue_desc-table">问题描述</th>
                <th class="reason-table">原因</th>
                <th class="solution-table">解决方案</th>
                <th>是否解决</th>
                <th>问题类型</th>
                <th>业务线</th>
                <th>应答人</th>
                <th>解决人</th>
                <th>备注</th>
                <th>图片</th>
                <th>严重程度</th>
                <th>是bug吗</th>
                <th>bug号</th>
                <th>影响范围</th>
{#                <th>创建人</th>#}
{#                <th>更新人</th>#}
{#                <th>创建时间</th>#}
{#                <th>更新时间</th>#}
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {% if total > 0 %}
            {% for fb in feedbacks %}
                <tr data-feedback_date="{{ fb.feedback_date }}" data-provider="{{ fb.provider }}" data-issue_desc="{{ fb.issue_desc }}"
                    data-reason="{{ fb.reason }}" data-solution="{{ fb.solution }}" data-ishandled="{{ fb.ishandled }}" data-issue_type="{{ fb.issue_type }}" data-business="{{ fb.business }}"
                    data-reciver="{{ fb.reciver }}" data-resolver="{{ fb.resolver }}" data-remark="{{ fb.remark }}" data-image_url="{{ fb.image_url }}"
                    data-issue_lever="{{ fb.issue_lever }}" data-isBug="{{ fb.isBug }}" data-bug_url="{{ fb.bug_url }}" data-influence="{{ fb.influence }}" data-id="{{ fb.id }}">

                    <td>
                        {{ fb.feedback_date|mycut(0,10) }}
                    </td>

                    <td>{{ fb.provider }}</td>
                    <td class="issue_desc-table">
                        {% if fb.issue_desc|length < text_max_length %}
                            {{ fb.issue_desc }}
                        {% else %}
                            {{ fb.issue_desc|mycut(0, text_max_length - 1) }}…
                            <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.issue_desc }}">详细</a>
                        {% endif %}
                    </td>
                    <td class="reason-table">
                        {% if fb.reason|length < text_max_length %}
                            {{ fb.reason }}
                        {% else %}
                            {{ fb.reason|mycut(0, text_max_length - 1) }}…
                            <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.reason }}">详细</a>
                        {% endif %}
                    </td>
                    <td class="solution-table">
                        {% if fb.solution|length < text_max_length %}
                            {{ fb.solution }}
                        {% else %}
                            {{ fb.solution|mycut(0, text_max_length - 1) }}…
                            <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer;" title="" data-content="{{ fb.solution }}">详细</a>
                        {% endif %}
                    </td>

                    <td>
                        {% if fb.ishandled == 0 %}待解决
                        {% elif fb.ishandled == 1 %}已解决
                        {% elif fb.ishandled == 2 %}未解决
                        {% elif fb.ishandled == 3 %}不需要解决
                        {% elif fb.ishandled == 4 %}用户自己解决
                        {% elif fb.ishandled == 5 %}无法复现
                        {% else %}未定义
                        {% endif %}
                    </td>

                    <td>
                        {% if fb.issue_type == 0 %}待确认
                        {% elif fb.issue_type == 1 %}系统错误
                        {% elif fb.issue_type == 2 %}运营操作错误
                        {% elif fb.issue_type == 3 %}用户误解
                        {% elif fb.issue_type == 4 %}外部原因
                        {% elif fb.issue_type == 5 %}UI展示
                        {% elif fb.issue_type == 6 %}需求优化
                        {% elif fb.issue_type == 7 %}无法复现
                        {% elif fb.issue_type == 8 %}第三方故障
                        {% elif fb.issue_type == 9 %}网络影响
                        {% elif fb.issue_type == 10 %}其他
                        {% elif fb.issue_type == 11 %}未知
                        {% else %}未定义
                        {% endif %}
                    </td>

                    <td>
                        {% set businessList = fb.business|filterNumbers %}
                        {% for item in businessList %}
                            {% if item != businessList[-1] %}
                                {{ business[item] }}，
                            {% else %}
                                {{ business[item] }}
                            {% endif %}
                        {% endfor %}
                    </td>

                    <td>{{ fb.reciver }}</td>
                    <td>{{ fb.resolver }}</td>

                    <td>
                        {% if fb.remark|length < text_max_length %}
                            {{ fb.remark }}
                        {% else %}
                            {{ fb.remark|mycut(0, text_max_length - 1) }}…
                            <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.remark }}">详细</a>
                        {% endif %}
                    </td>

                    <td style="overflow: hidden;">
                        {% if fb.image_url %}
                            {% if 'http://' in fb.image_url or 'https://' in fb.image_url %}
                                {% set imgOrVideo = fb.image_url|is_imgOrVideo %}
                                {% if imgOrVideo %}
                                    <a href="{{ fb.image_url }}" target="_blank">
                                        <img src="{{ fb.image_url }}" class="img-rounded"/>
                                    </a>
                                {% else %}
                                    <p>图片格式错误</p>
                                {% endif %}
                            {% else %}
                                <p>图片地址错误</p>
                            {% endif %}
                        {% else %}
                            <p></p>
                        {% endif %}
                    </td>

                    <td>
                        {% if fb.issue_lever == 0 %}事故
                        {% elif fb.issue_lever == 1 %}崩溃
                        {% elif fb.issue_lever == 2 %}严重
                        {% elif fb.issue_lever == 3 %}较严重
                        {% elif fb.issue_lever == 4 %}一般
                        {% elif fb.issue_lever == 5 %}轻微
                        {% elif fb.issue_lever == 6 %}UI展示
                        {% elif fb.issue_lever == -16 %}未设置
                        {% else %}未定义
                        {% endif %}
                    </td>

                    <td>
                        {% if fb.isBug == 0 %}否
                        {% elif fb.isBug == 1 %}是
                        {% elif fb.isBug == 2 %}不确定
                        {% elif fb.isBug == -1 %}未设置
                        {% else %}未定义
                        {% endif %}
                    </td>

                    <td>
                        {% set bug_url_type = fb.bug_url|is_number %}
                        {% if fb.bug_url %}
                            {% if bug_url_type == 1 %}
                                {% if fb.bug_url|length < 8 %}
                                    <a href="{{ bug_url }}{{ fb.bug_url }}" target="_blank">{{ fb.bug_url }}</a>
                                {% else %}
                                    <a href="{{ bug_url }}{{ fb.bug_url }}" target="_blank">{{ fb.bug_url|mycut(0, 7) }}…</a>
                                    <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.bug_url }}">详细</a>
                                {% endif %}
                            {# bug号输入url后的处理 #}
                            {% elif bug_host in fb.bug_url%}
                                {% if fb.bug_url|length < 10 %}
                                    <a href="{{ fb.bug_url }}" target="_blank">{{ fb.bug_url }}</a>
                                {% else %}
                                    <a href="{{ fb.bug_url }}" target="_blank">{{ fb.bug_url|mycut(0, 9) }}…</a>
                                    <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.bug_url }}">详细</a>
                                {% endif %}
                            {% else %}
                                <p>bug号错误</p>
                            {% endif %}
                        {% else %}
                            <p></p>
                        {% endif %}

                    </td>

                    <td>
                        {% if fb.influence|length < text_max_length %}
                            {{ fb.influence }}
                        {% else %}
                            {{ fb.influence|mycut(0, text_max_length - 1) }}…
                            <a tabindex="0" class="more" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" style="cursor: pointer" title="" data-content="{{ fb.influence }}">详细</a>
                        {% endif %}
                    </td>
{#                    <td>{{ fb.create_by }}</td>#}
{#                    <td>{{ fb.update_by }}</td>#}
{#                    <td>{{ fb.create_at }}</td>#}
{#                    <td>{{ fb.update_at }}</td>#}
                    <td>
                        <button class="btn btn-default btn-xs edit-feedback-btn">编辑</button>
                        <button class="btn btn-default btn-xs preview-feedback-btn">查看</button>
                        <button class="btn btn-default btn-xs"  tabindex="0" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="left" title="工单编号" data-content="{{ fb.order_code }}">工单号</button>
                        <button class="btn btn-danger btn-xs delete-feedback-btn" disabled="disabled" style="display: none">删除</button>
                    </td>
                </tr>
            {% endfor %}
        {% else %}
            <td><h1 align="center">还没有记录，快去添加吧！</h1></td>
        {% endif %}
        </tbody>
    </table>

    <!-- 新增/编辑 -->
    <div class="modal fade" id="feedback-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true" onclick="location.reload();">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加/修改问题反馈</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>反馈日期：</label>
                            <div class="col-sm-3">
                                <input type="date" class="form-control" name="feedback_date">
                            </div>

                            <label class="col-sm-2 control-label"><a>*</a>反馈人：</label>
                            <div class="col-sm-3">
                                <input maxlength="20" type="text" class="form-control" name="provider" placeholder="反馈人，最多20个字符">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>业务线：</label>
                            <div class="col-sm-10">
                                <div class="checkbox" id="business-line">
                                    {% for item in business %}
                                        <label>
                                            <input type="checkbox" name="business-box" id="business-box" value="{{ item }}">{{ business[item] }}
                                        </label>&nbsp;&nbsp;&nbsp;&nbsp;
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>问题描述：</label>
                            <div class="col-sm-10">
                                <textarea maxlength="1000" class="form-control" name="issue_desc" placeholder="问题描述，最多1000个字符"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">原因：</label>
                            <div class="col-sm-10">
                                <textarea maxlength="1000" type="text" class="form-control" name="reason" placeholder="引起问题的原因，最多1000个字符"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">解决方案：</label>
                            <div class="col-sm-10">
                                <textarea maxlength="1000" type="text" class="form-control" name="solution" placeholder="问题的解决方案，最多1000个字符"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片/视频：</label>
                            <div class="col-sm-7">
                                <input maxlength="500" type="text" class="form-control" name="image_url" placeholder="可以直接输入图片或视频链接，也可以选择文件添加，注意大小不能超过 1MB，最多500个字符">
                            </div>
                            <button class="btn btn-info col-sm-2" id="upload-btn">添加图片</button>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea maxlength="1000" type="text" class="form-control" name="remark" placeholder="备注信息，最多1000个字符"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>解决状态：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="ishandled">
                                    <option value="0">待解决</option>
                                    <option value="1">已解决</option>
                                    <option value="2">未解决</option>
                                    <option value="3">不需要解决</option>
                                    <option value="4">用户自己解决</option>
                                    <option value="5">无法复现</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label"><a>*</a>问题类型：</label>
                            <div class="col-sm-2">
                                <select class="form-control selector" id="issue_type">
                                    <option value="0">待确认</option>
                                    <option value="1">系统错误</option>
                                    <option value="2">运营操作错误</option>
                                    <option value="3">用户误解</option>
                                    <option value="4">外部原因</option>
                                    <option value="5">UI展示</option>
                                    <option value="6">需求优化</option>
                                    <option value="7">无法复现</option>
                                    <option value="8">第三方故障</option>
                                    <option value="9">网络影响</option>
                                    <option value="10">其他</option>
                                    <option value="11">未知</option>
                                </select>
                            </div>

                            <label class="col-sm-2 control-label"><a>*</a>严重程度：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="issue_lever">
                                    <option value="-1">请选择</option>
                                    <option value="0">事故</option>
                                    <option value="1">崩溃</option>
                                    <option value="2">严重</option>
                                    <option value="3">较严重</option>
                                    <option value="4">一般</option>
                                    <option value="5">轻微</option>
                                    <option value="6">UI展示</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>是否为bug：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="isBug">
                                    <option value="-1">请选择</option>
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                    <option value="2">不确定</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">bug号：</label>
                            <div class="col-sm-6">
                                <input maxlength="200" type="text" class="form-control" name="bug_url" placeholder="禅道中的bug号，最多200个字符">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>应答人：</label>
                            <div class="col-sm-3">
                                <input maxlength="20" type="text" class="form-control" name="reciver" placeholder="接收问题的人，最多20个字符">
                            </div>
                            <label class="col-sm-2 control-label">解决人：</label>
                            <div class="col-sm-3">
                                <input maxlength="20" type="text" class="form-control" name="resolver" placeholder="解决问题的人，最多20个字符">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">影响范围：</label>
                            <div class="col-sm-10">
                                <textarea maxlength="100" class="form-control" name="influence" placeholder="影响范围（如，ios，app7.8，后台...），最多100个字符"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload();">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-feedback-btn">保存</button>
                    <button type="button" class="btn btn-primary" id="saveAndContinue-btn">保存并继续添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看 -->
    <div class="modal fade" id="preview-feedback-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">问题反馈信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>反馈日期：</label>
                            <div class="col-sm-3">
                                <input type="date" class="form-control" name="preview-feedback_date" disabled="disabled">
                            </div>

                            <label class="col-sm-2 control-label"><a>*</a>反馈人：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="preview-provider" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>业务线：</label>
                            <div class="col-sm-10">
                                <div class="checkbox" id="preview-business-line">
                                    {% for item in business %}
                                        <label>
                                            <input type="checkbox" disabled="disabled" name="preview-business-box" value="{{ item }}">{{ business[item] }}
                                        </label>&nbsp;&nbsp;&nbsp;&nbsp;
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>问题描述：</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="preview-issue_desc" disabled="disabled"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">原因：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-reason"  disabled="disabled"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">解决方案：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-solution"  disabled="disabled"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片/视频：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="preview-image_url" disabled="disabled">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="preview-remark"  disabled="disabled"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>解决状态：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="preview-ishandled" disabled="disabled">
                                    <option value="0">待解决</option>
                                    <option value="1">已解决</option>
                                    <option value="2">未解决</option>
                                    <option value="3">不需要解决</option>
                                    <option value="4">用户自己解决</option>
                                    <option value="5">无法复现</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label"><a>*</a>问题类型：</label>
                            <div class="col-sm-2">
                                <select class="form-control selector" id="preview-issue_type" disabled="disabled">
                                    <option value="0">待确认</option>
                                    <option value="1">系统错误</option>
                                    <option value="2">运营操作错误</option>
                                    <option value="3">用户误解</option>
                                    <option value="4">外部原因</option>
                                    <option value="5">UI展示</option>
                                    <option value="6">需求优化</option>
                                    <option value="7">无法复现</option>
                                    <option value="8">第三方故障</option>
                                    <option value="9">网络影响</option>
                                    <option value="10">其他</option>
                                    <option value="11">未知</option>
                                </select>
                            </div>

                            <label class="col-sm-2 control-label"><a>*</a>严重程度：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="preview-issue_lever" disabled="disabled">
                                    <option value="-1">请选择</option>
                                    <option value="0">事故</option>
                                    <option value="1">崩溃</option>
                                    <option value="2">严重</option>
                                    <option value="3">较严重</option>
                                    <option value="4">一般</option>
                                    <option value="5">轻微</option>
                                    <option value="6">UI展示</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>是否为bug：</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="preview-isBug" disabled="disabled">
                                    <option value="-1">请选择</option>
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                    <option value="2">不确定</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">bug号：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="preview-bug_url"  disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><a>*</a>应答人：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="preview-reciver"  disabled="disabled">
                            </div>
                            <label class="col-sm-2 control-label">解决人：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="preview-resolver"  disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">影响范围：</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="preview-influence"  disabled="disabled"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload();">关闭</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}